import { Space } from 'antd';
import React, { useState } from 'react';
import { WarningFilled } from '@ant-design/icons';
import { history } from 'umi';
import { useModel } from 'umi';
import Avatar from './AvatarDropdown';
import HeaderSearch from '../HeaderSearch';
import styles from './index.less';
export type SiderTheme = 'light' | 'dark';
import { queryDeviceAlarmNotices} from '@/services/deviceAlarm';


const GlobalHeaderRight: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const { mySocket ,dicts} = initialState || {};
  
  const [notices,setNotices ] = useState();
  

  const  getInitNotices= async ()=>{
      //获取报警信息
      const alarmNotices = await queryDeviceAlarmNotices({});
      if(alarmNotices!=null&&alarmNotices.length>0){
        getNotices(alarmNotices);
      }

  }
  getInitNotices();
  const  getNotices= async (noticeList) => {
    if(initialState?.settings?.headerHeight!=90){
      await setInitialState((s) => ({ ...s, settings: {headerHeight:90} }));
    }
    let  notice="";
    noticeList.forEach(function(val, index, arr){
      notice+=" "+val.alarmTime+val.deviceName+dicts["8Enum"][val.alarmLevel] +dicts["6Enum"][val.alarmType]+" ";
     
   });
   setNotices(notice)
  }

  // if(alarmNotices&&!notices){
  //   getNotices(alarmNotices);
  // }else if(!alarmNotices){
  //   if(initialState?.settings?.headerHeight!=58){
  //      setInitialState((s) => ({ ...s, settings: {headerHeight:58} }));
  //   }
  //   setNotices("");

  // }


  if (mySocket) {

    mySocket.onmessage = function (e) {
      //排除心跳数据
      if ("heartbeat" != e.data) {
        const msg= JSON.parse(e.data);
        if(msg.AlarmData!=null){
          getNotices( msg.AlarmData);
        }
        
      }
    };
  }

  if (!initialState || !initialState.settings) {
    return null;
  }

  const { navTheme, layout } = initialState.settings;
  let className = styles.right;

  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <Space className={className}>
      {notices&&notices!=""?
      <div className={styles.overallNotice} onClick={()=>history.push("/alarm/record")}>
        　 <marquee behavior="scroll">  <WarningFilled /> {notices}</marquee>
        </div>
      :null}
      {/* <span
        className={styles.action}
        onClick={() => {
          window.open('https://pro.ant.design/docs/getting-started');
        }}
      >
        <QuestionCircleOutlined />
      </span> */}
      <Avatar />
    </Space>
  );
};

export default GlobalHeaderRight;
